"use client" //变成客户端组件，默认是服务器组件
import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import { Button, Card, Image, Typography, Divider, Form, Input, Checkbox, Modal, message } from 'antd'
import style from '@/app/page.module.css'
import { useRef } from 'react'
import { adminLoginApi } from '@/apis/login'
import { adminLoginApi2 } from '@/apis/login2'
const { Title } = Typography;

export default function Login() {
  const router = useRouter()
  const doLogin = async (value) => {
    console.log(value)
    if (value.remember) {
      localStorage.setItem('adminInfo', JSON.stringify(value))
    } else {
      localStorage.removeItem('adminInfo')
    }
    message.loading('登陆中', 0)
    const res = await adminLoginApi(value.adminName, value.password)
    const res2 = await adminLoginApi2(value.adminName, value.password)
    const resObj = await res.json()
    const resObj2 = await res2.json()
    message.destroy()
    console.log(resObj)
    console.log(resObj2)
    if (resObj.code === 2000) {
      message.success(`欢迎回来${value.adminName}!`)
      localStorage.setItem('adminToken', resObj.token)
      localStorage.setItem('adminToken2', resObj2.token)
      router.replace('/admin')
    } else {
      Modal.error({
        okText: '确定',
        title: '错误',
        content: `登陆失败，服务器返回错误消息${resObj.msg}`,
        centered: true
      })
    }
  }
  const formRef = useRef()
  useEffect(() => {
    const adminInfo = localStorage.getItem('adminInfo')
    if (adminInfo) {
      const adminInfoObj = JSON.parse(adminInfo)
      formRef.current.setFieldsValue({
        adminName: adminInfoObj.adminName,
        password: adminInfoObj.password,
        remember: adminInfoObj.remember
      })
    }
  }, [])
  return (
    <div className={style.page}>
      {/* 标题字 */}
      <Title style={{ color: '#fff', textAlign: 'center', marginTop: '100px' }} >天通苑智慧社区管理系统</Title>
      {/* 卡片 */}
      <Card
        // title="Default size card"
        // extra={<a href="#">More</a>}
        style={{
          width: 600,
          margin: '30px auto 0'
        }}
      >
        <div style={{ display: 'flex' }}>
          {/* 左侧图片 */}
          <Image
            width={220}
            src='../img/u794.png'
            preview={false}
          />
          {/* 分割线 */}
          <Divider type='vertical' style={{ height: '220px', backgroundColor: '#3f9bde' }} />
          <Form
            ref={formRef}
            validateTrigger='onBlur'
            name="basic"
            labelCol={{
              span: 6,
            }}
            wrapperCol={{
              span: 18,
            }}
            style={{
              flex: 1,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between', paddingTop: '10px'
            }}
            onFinish={doLogin}
            initialValues={{
              remember: false,
              adminName: '',
              password: ''
            }}>
            <Form.Item
              label="管理员名"
              name="adminName"
              rules={[
                {
                  required: true,
                  message: '请输入管理员名!',
                },
              ]}
            >
              <Input placeholder='请输入用户名' />
            </Form.Item>

            <Form.Item
              style={{ marginBottom: '22px' }}
              label="登陆密码"
              name="password"
              rules={[
                {
                  required: true,
                  message: '请输入密码',
                },
              ]}
            >
              <Input.Password placeholder='请输入密码' />
            </Form.Item>
            <Form.Item
              style={{ marginBottom: '8px' }}
              name="remember"
              valuePropName="checked"
              wrapperCol={{
                offset: 17,
                span: 7,
              }}
            >
              <Checkbox>记住密码</Checkbox>
            </Form.Item>
            <Form.Item
              wrapperCol={{
                offset: 0,
                span: 24,
              }}>
              <Button shape="round" style={{ width: '100%', marginBottom: '0px' }} type="primary" htmlType="submit">登录</Button>
            </Form.Item>
          </Form>
        </div>
      </Card>

    </div>
  )
}
